<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="common.css" rel="stylesheet" type="text/css" media="screen" />
<title>screen design</title>
</head>
<body>
	<div
		style="background: gray; width: 780px; height:auto;text-align: center; margin-top:25px; margin-left: auto; margin-right: auto;">
		nav
	</div>
	<div id="wrap0-0">
	<div style="float:left; background:#75D975; width:226px; height:1500px;">left blank or left ad</div>
	<div style="float:right; background:#75D975; width:226px; height:1500px;">right blank or left ad</div>
	
	<div id="wrap1-1" style="width:780px; margin-left: auto; margin-right: auto;">
	<div style="float:left; width: 780px;height:100px; margin-top:6px; margin-bottom:6px; background: gray;">
		<a href="http://www.baidu.com"><img src="gd1.png" title="alt image2"/></a>
	</div>
	<div
		style="float:left; background: gray; width: 780px; text-align: center; margin-left: auto; margin-right: auto;">
		
		<!-- first content left+center+right -->
		<div
			style="background: green; float: left; width: 256px; height: 200px; word-wrap: break-word; word-break: break-all;">
			<!-- word-wrap:   break-word;
		 word-break:   break-all;
		 overflow:   hidden;   /*   这句是针对火狐，上面两句在火狐下不能用，只好溢出时隐藏   */
		  若要火狐下换行，可用Javascript实现 
	-->
			<div style="background: yellow; text-align: left; width: 100%">
				<img src="gd1.png" title="alt image2" style="width:100%"/>
			</div>
			<div style="text-align:left;margin-left:4px; margin-right:4px">left content
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
			</div>

		</div>
		<div
			style="background: green; float: left; width: 256px; margin-left: 6px; height: auto;word-wrap: break-word; word-break: break-all;">
			<div style="background: yellow; text-align: left; width: 100%">
				<img src="gd1.png" title="alt image2" style="width:100%"/>
			</div>
			<div style="text-align:left;margin-left:4px; margin-right:4px">center content
				<ul>
					<li><a href="#">one</a></li>
					<li><a href="#">two</a></li>
					<li><a href="#">three</a></li>
					<li><a href="#">four</a></li>
					<li><a href="#">five</a></li>
				</ul>			
			</div>
		</div>
		<div
			style="background: green; float: left; width: 256px; margin-left: 6px; height: auto;word-wrap: break-word; word-break: break-all;">
			<div style="background: yellow; text-align: left; width: 100%">
				<img src="gd1.png" title="alt image2" style="width:100%"/>
			</div>
			<div style="text-align:left;margin-left:4px; margin-right:4px">center content
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
			</div>
		</div>
	</div>
	<div style="float:left; width: 780px;height:100px; margin-top:6px; margin-bottom:6px; background: gray;">
		<a href="http://www.baidu.com"><img src="gd1.png" title="alt image2"/></a>
	</div>
	
	<!-- second content left+center+right -->
	<div
		style="float:left; background: gray; width: 780px; text-align: center; margin-left: auto; margin-right: auto;">
		<div
			style="background: green; float: left; width: 256px; height: 200px; word-wrap: break-word; word-break: break-all;">
			<div style="background: gray; text-align: left; width: 100%">left
				header</div>
			<div style="text-align:left;margin-left:4px; margin-right:4px">left content
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
			</div>

		</div>
		<div
			style="background: green; float: left; width: 256px; margin-left: 6px; height: auto;word-wrap: break-word; word-break: break-all;">
			<div style="background: gray; text-align: left; width: 100%">center header</div>
			<div style="text-align:left;margin-left:4px; margin-right:4px">center content
				<ul>
					<li><a href="#">one</a></li>
					<li><a href="#">two</a></li>
					<li><a href="#">three</a></li>
					<li><a href="#">four</a></li>
					<li><a href="#">five</a></li>
				</ul>			
			</div>
		</div>
		<div
			style="background: green; float: left; width: 256px; margin-left: 6px; height: auto;word-wrap: break-word; word-break: break-all;">
			<div style="background: gray; text-align: left; width: 100%">right header</div>
			<div style="text-align:left;margin-left:4px; margin-right:4px">center content
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
			</div>
		</div>
	</div>
	
	<div style="float:left; width: 780px;height:100px; margin-top:6px; margin-bottom:6px; background: gray;">
		<a href="http://www.baidu.com"><img src="gd1.png" title="alt image2"/></a>
	</div>
	
	<!-- third content left+center+right -->
	<div
		style="float:left; background: gray; width: 780px; text-align: center; margin-left: auto; margin-right: auto;">
		<div
			style="background: green; float: left; width: 256px; height: 200px; word-wrap: break-word; word-break: break-all;">
			<div style="background: gray; text-align: left; width: 100%">left
				header</div>
			<div style="text-align:left;margin-left:4px; margin-right:4px">left content
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
			</div>

		</div>
		<div
			style="background: green; float: left; width: 256px; margin-left: 6px; height: auto;word-wrap: break-word; word-break: break-all;">
			<div style="background: gray; text-align: left; width: 100%">center header</div>
			<div style="text-align:left;margin-left:4px; margin-right:4px">center content
				<ul>
					<li><a href="#">one</a></li>
					<li><a href="#">two</a></li>
					<li><a href="#">three</a></li>
					<li><a href="#">four</a></li>
					<li><a href="#">five</a></li>
				</ul>			
			</div>
		</div>
		<div
			style="background: green; float: left; width: 256px; margin-left: 6px; height: auto;word-wrap: break-word; word-break: break-all;">
			<div style="background: gray; text-align: left; width: 100%">right header</div>
			<div style="text-align:left;margin-left:4px; margin-right:4px">center content
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
			</div>
		</div>
	</div>
	
	
	<div style="float:left; width: 780px;height:100px; margin-top:6px; margin-bottom:6px; background: gray;">
		<a href="http://www.baidu.com"><img src="gd1.png" style="height: 100%;width: 100%;" title="alt image2" /></a>
	</div>
	
	<!-- fourth content left+center+right -->
	<div
		style="float:left; background: gray; width: 780px; text-align: center; margin-left: auto; margin-right: auto;">
		<div
			style="background: green; float: left; width: 256px; height: 200px; word-wrap: break-word; word-break: break-all;">
			<div style="background: gray; text-align: left; width: 100%">left
				header</div>
			<div style="text-align:left;margin-left:4px; margin-right:4px">left content
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
			</div>

		</div>
		<div
			style="background: green; float: left; width: 256px; margin-left: 6px; height: auto;word-wrap: break-word; word-break: break-all;">
			<div style="background: gray; text-align: left; width: 100%">center header</div>
			<div style="text-align:left;margin-left:4px; margin-right:4px">center content
				<ul>
					<li><a href="#">one</a></li>
					<li><a href="#">two</a></li>
					<li><a href="#">three</a></li>
					<li><a href="#">four</a></li>
					<li><a href="#">five</a></li>
				</ul>			
			</div>
		</div>
		<div
			style="background: green; float: left; width: 256px; margin-left: 6px; height: auto;word-wrap: break-word; word-break: break-all;">
			<div style="background: gray; text-align: left; width: 100%">right header</div>
			<div style="text-align:left;margin-left:4px; margin-right:4px">center content
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
			</div>
		</div>
	</div>
	
	
	<div style="float:left; width: 780px;height:100px; margin-top:6px; margin-bottom:6px; background: gray;">
		<a href="http://www.baidu.com"><img src="gd1.png" style="height: 100%;width: 100%;" title="alt image2" /></a>
	</div>
	
	<!-- fourth content left+center+right -->
	<div
		style="float:left; background: gray; width: 780px; text-align: center; margin-left: auto; margin-right: auto;">
		<div
			style="background: green; float: left; width: 256px; height: 200px; word-wrap: break-word; word-break: break-all;">
			<div style="background: gray; text-align: left; width: 100%">left
				header</div>
			<div style="text-align:left;margin-left:4px; margin-right:4px">left content
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
			</div>

		</div>
		<div
			style="background: green; float: left; width: 256px; margin-left: 6px; height: auto;word-wrap: break-word; word-break: break-all;">
			<div style="background: gray; text-align: left; width: 100%">center header</div>
			<div style="text-align:left;margin-left:4px; margin-right:4px">center content
				<ul>
					<li><a href="#">one</a></li>
					<li><a href="#">two</a></li>
					<li><a href="#">three</a></li>
					<li><a href="#">four</a></li>
					<li><a href="#">five</a></li>
				</ul>			
			</div>
		</div>
		<div
			style="background: green; float: left; width: 256px; margin-left: 6px; height: auto;word-wrap: break-word; word-break: break-all;">
			<div style="background: gray; text-align: left; width: 100%">right header</div>
			<div style="text-align:left;margin-left:4px; margin-right:4px">center content
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
				cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
			</div>
		</div>
	</div>
	
	
</div>
</div>
</body>
</html>